<div th:fragment="searchHTML">

	<div id="id_form_search" class="layui-col-md2 search-panel">
		<div class="search-top" style="background: rgb(0, 135, 250);">
			<a data-id="icon-to-hide" href="javascript:;" onclick="hideSearch();">
				<i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible" style="color: #fff;"></i>
				<span style="color: white; margin-left: 100px;">搜索条件</span>
			</a>
			<a data-id="icon-to-show" href="javascript:;" onclick="showSearch();">
				<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible" style="color: #fff;"></i>
			</a>
		</div>
		<form class="layui-form margin_0" name="searchForm" style="padding: 0.2rem; width: 290px;">
			<div class="layui-form-item margin_0">
				<div class="layui-inline layui-col-xs12 margin_0" th:each="condition : ${dto.conditions}" style="margin-right: 0px;">
					<input th:if="${condition.type} eq 't_hidden'" th:name="${condition.code}" type="hidden" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class="bo-search-field">
					<div th:if="${condition.type} eq 't_text'">
						<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
						<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
							<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
							<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
						</div>
					</div>
					<div th:if="${condition.type} eq 't_monthly'">
						<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
						<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
							<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-yyyymm" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
							<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
						</div>
					</div>
					<div th:if="${condition.type} eq 't_date'">
						<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
						<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
							<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-date" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
							<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
						</div>
					</div>
					<div th:if="${condition.type} eq 't_datetime'">
						<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
						<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
							<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-datetime" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
							<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
						</div>
					</div>
					<div th:if="${condition.type} eq 't_year'">
						<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
						<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
							<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-year" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
							<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
						</div>
					</div>
					<div th:if="${condition.type} eq 't_buttontext'">
						<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
						<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
							<input th:data-id-field-value="${condition.id}" type="hidden" th:name="${condition.code}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class="bo-search-field">
							<input th:data-id-field-name="${condition.id}" type="text" th:placeholder="${condition.placeHolder}" autocomplete="off" class="height_24 layui-input" value="" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;" readonly="readonly">
							<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';this.previousSibling.previousSibling.previousSibling.previousSibling.value = '';"></i>
							<i style="position: relative; right: 40px;" class="layui-icon layui-icon-more" th:onclick="showModal('[(${condition.id})]')"></i>
						</div>
					</div>
					<div th:if="${condition.type} eq 't_dropdown'">
						<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
						<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
							<select th:name="${condition.code}" class="bo-search-field-selector">
								<option th:each="option: ${condition.optionArr}" th:value="${option.value}" th:text="${option.name}"></option>
							</select>
						</div>
					</div>
				</div>
			</div>
			<div style="width:100%; text-align: center;">
				<a id="id_filter_form_search" class="layui-btn layui-btn-normal layui-btn-xs search_btn"><i class="layui-icon layui-icon-search"></i> 查询</a>
				<button id="id_filter_form_clear" type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-filter="filter_form_search_clear"><i class="layui-icon layui-icon-close"></i> 清空</button>
			</div>
		</form>
	</div>
</div>
<div th:fragment="searchJS">
	<script type="text/javascript">
		$(function() {
			$('#id_form_search').find('a[data-id="icon-to-show"]').hide();

			var laydate = layui.laydate;
			// 绑定查询按钮--表格重载成功后
			$('#id_filter_form_search').on('click', function(e){
				layui.table.reload("main_table",{
					page: {curr: 1},
					where: getConds()
				})
			});

			//初始化搜索框-日期限定一个月
			lay('.bo-search-field-yyyymm[cond-range-type="t_system"]').each(function(){
				var myDate = new Date();
				var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1);
				laydate.render({
					elem: this
					, type: 'month'
					, format: 'yyyy-MM'
					, max: maxtime
					//, max: maxtime//设置选择最大时间为当前
					, calendar: true
					, btns: ['clear', 'confirm', 'now']
					, done: function (value, date) {
						//这里时选中后触发事件
						//value是选中的值
						var time = value;
					}
				});
			});

			//初始化搜索框-月范围
			lay('.bo-search-field-yyyymm[cond-range-type="t_between"]').each(function(){
				var myDate = new Date();
				var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1);
				laydate.render({
					elem: this
					, type: 'month'
					, format: 'yyyy-MM'
					, range: '~'
					, max: maxtime
					//, max: maxtime//设置选择最大时间为当前
					, calendar: true
					, btns: ['clear', 'confirm', 'now']
					, done: function (value, date) {
						//这里时选中后触发事件
						//value是选中的值
						var time = value;
					}
				});
			});

			//初始化搜索框-日期限定一天
			lay('.bo-search-field-date[cond-range-type="t_system"]').each(function(){
				var myDate = new Date();
				var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());
				laydate.render({
					elem: this
					, type: 'date'
					, max: maxtime
					//, max: maxtime//设置选择最大时间为当前
					, calendar: true
					, btns: ['clear', 'confirm', 'now']
					, done: function (value, date) {
						//这里时选中后触发事件
						//value是选中的值
						var time = value;
					}
				});
			});

			//初始化搜索框-日期范围
			lay('.bo-search-field-date[cond-range-type="t_between"]').each(function(){
				var myDate = new Date();
				var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());
				laydate.render({
					elem: this
					, type: 'date'
					, max: maxtime
					, range: '~'
					//, max: maxtime//设置选择最大时间为当前
					, calendar: true
					, btns: ['clear', 'confirm', 'now']
					, done: function (value, date) {
						//这里时选中后触发事件
						//value是选中的值
						var time = value;
					}
				});
			});

			//初始化搜索框-日期时间范围
			lay('.bo-search-field-datetime').each(function(){
				var myDate = new Date();
				var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate()) + " 23:59:59";
				laydate.render({
					elem: this
					, type: 'datetime'
					, max: maxtime
					, range: '~'
					//, max: maxtime//设置选择最大时间为当前
					, calendar: true
					, btns: ['clear', 'confirm', 'now']
					, done: function (value, date) {
						//这里时选中后触发事件
						//value是选中的值
						var time = value;
					}
				});
			});

			//初始化搜索框-年份
			lay('.bo-search-field-year').each(function(){
				laydate.render({
					elem: this
					, type: 'year'
					//, max: maxtime//设置选择最大时间为当前
					, calendar: false
					, btns: ['clear', 'confirm']
					, done: function (value, date) {
						//这里时选中后触发事件
						//value是选中的值
						var time = value;
					}
				});
			});


			// 清空按钮
			$('#id_filter_form_clear').on('click', function(e){
				layer.confirm("确定清空搜索条件吗？",{
					btn: ['确定', '取消']
				}, function (index) {
					$('form[name="searchForm"]').find('input[type=text],select').each(function() {
						$(this).val('');
					});
					layer.close(index);
				});
				return false;
			});


		});

		function hideSearch() {
			var objSearch = $('#id_form_search');
			objSearch.removeClass('layui-col-md2');
			objSearch.find('form[name="searchForm"]').hide();
			objSearch.find('a[data-id="icon-to-hide"]').hide();
			objSearch.find('a[data-id="icon-to-show"]').show();

			$('#id_panel_left_grid').removeClass('layui-col-md10');
			$('#id_panel_left_grid').addClass('layui-col-md12');
		}
		function showSearch() {
			var objSearch = $('#id_form_search');
			objSearch.addClass('layui-col-md2');
			objSearch.find('form[name="searchForm"]').show();
			objSearch.find('a[data-id="icon-to-show"]').hide();
			objSearch.find('a[data-id="icon-to-hide"]').show();

			$('#id_panel_left_grid').removeClass('layui-col-md12');
			$('#id_panel_left_grid').addClass('layui-col-md10');
		}
	</script>
</div>